import { defineComponent, reactive } from "vue";
import styles from "./orderListZBJ.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  setup() {
    const navs = reactive({
      list: [
        {
          text: '待提交'
        },
        {
          text: '全部订单',
        },
        {
          text: '待审核/待核保',
        },
        {
          text: '待支付/待出单',
        },
        {
          text: '已出单',
        },
        {
          text: '出单失败',
        },
        {
          text: '已退保',
        },
      ],
      navsActived: 1,
    })

    const NavClick = (index: number) => {
      navs.navsActived = index
    }
    //导航栏
    const Navs = () => (
      <div class={styles['orderListZBJ-nav']}>
        {
          navs.list.map((itemY: any, index: number) => (
            <div class={styles['nav-item']} onClick={() => { NavClick(index) }}>
              <span class={[styles.text,
              index === navs.navsActived && styles['nav-item-actived'],
              index !== navs.navsActived && styles['nav-item-noActived']]}
              >{itemY.text}</span>
            </div>
          ))
        }
      </div>
    )
    const state =reactive({
      list:[]
    })
    //列表
    const OderList = () => (
      <div class={styles['oderList']}>
        <div class={styles['oderList-thead']}>
          <div class={styles['col-1']}>订单详情</div>
          <div class={styles['col-2']}>状态/保费（元）</div>
          <div class={styles['col-3']}>操作</div>
        </div>
        {
          state.list.length === 0 ? 
            <div class={styles['no-message']}>
              <img src={imgPath('/userCenter/no-message.jpg')} />
            </div> :
            <div>

            </div>
        }
      </div>
    )
    return () => (
      <div class={styles['order-list-ZBJ']}>
        <div class={styles['header-box']}>质保金订单列表</div>
        <Navs />
        <OderList />
      </div>
    )
  }
})